<template>
	<view class="container">
		<!-- 基本信息 -->
		<view class="info-section">
			<view class="section-header">
				<text class="section-title">基本信息</text>
				<up-tag :text="detail?.masterInfo?.scrapStatusName" size="mini"
					v-if="detail?.masterInfo?.scrapStatusName" />
			</view>
			<view class="info-list">
				<view class="info-item">
					<text class="info-label">报废单号</text>
					<text class="info-value">{{ detail?.masterInfo?.scrapCode || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">报废单名称</text>
					<text class="info-value">{{ detail?.masterInfo?.scrapName || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">报废日期</text>
					<text class="info-value">{{ detail?.masterInfo?.creationTime || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">报废人</text>
					<text class="info-value">{{ detail?.masterInfo?.scrapUserName || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">报废原因</text>
					<text class="info-value">{{ detail?.masterInfo?.scrapReasonName || '-' }}</text>
				</view>
			</view>
		</view>

		<!-- 资产列表 -->
		<view class="asset-section">
			<view class="section-header">
				<text class="section-title">资产列表</text>
				<text class="asset-count">共计: {{ detail?.assetDetails?.length || 0 }}</text>
			</view>
			<view class="asset-list" v-if="detail && detail.assetDetails && detail.assetDetails.length > 0">
				<view class="asset-item" v-for="(item, index) in detail.assetDetails" :key="index">
					<view class="asset-img-container">
						<image class="asset-img"
							:src="item.image ? `${BASE_URL}/File/GetImage?fileId=${item.image}` : '/static/placeholder.png'"
							mode="aspectFill" />
					</view>
					<view class="asset-info">
						<view class="asset-name">{{ item.assetName }}</view>
						<view class="asset-detail">资产分类: {{ item.assetClassName }}</view>
						<view class="asset-detail">资产编码: {{ item.assetCode }}</view>
						<view class="asset-detail">资产规格: {{ item.specModel || '-' }}</view>
					</view>
				</view>
			</view>
			<view class="empty-tip" v-else>
				<text>暂无资产</text>
			</view>
		</view>

		<!-- 审核按钮 -->
		<view class="footer-btn" v-if="!isAuditMode">
			<view class="btn-group">
				<view class="btn back-btn" @click="goBack">返回</view>
			</view>
		</view>

		<!-- 审核模式下的底部按钮 -->
		<view class="footer-btn audit-btns" v-if="isAuditMode">
			<up-button type="default" text="驳回" @click="showRejectDialog"></up-button>
			<up-button type="primary" text="通过" @click="approveScrap"></up-button>
		</view>

		<!-- 驳回原因弹窗 -->
		<up-popup :show="showRejectPopup" :round="10" mode="center" @close="closeRejectDialog">
			<view class="reject-popup">
				<view class="reject-title">驳回原因</view>
				<view class="reject-content">
					<up-textarea v-model="rejectReason" placeholder="请输入驳回原因" :maxlength="200"></up-textarea>
				</view>
				<view class="reject-buttons">
					<up-button type="default" text="取消" @click="closeRejectDialog"></up-button>
					<up-button type="primary" text="确定" @click="confirmReject"></up-button>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import http, {
		BASE_URL
	} from '@/api/request';
	import { t } from "@/locale/index.js"
	// 页面数据
	const detail = ref({
		assetDetails: [],
		masterInfo: {}
	});
	// 方法
	const loadScrapDetail = (scrapCode) => {
		console.log('加载报废单详情:', scrapCode); // 添加日志查看参数
		uni.showLoading({
			title: '加载中...'
		});

		http.post('/api/module/Invoke', {
			pageCode: 'assetscrapping',
			params: {
				args: [{
						name: 'interfaceCode',
						value: 'assetscrapping.getAssetScrapOrderDetail'
					},
					{
						name: 'scrapCode',
						value: scrapCode
					}
				]
			},
			methodName: 'getAssetScrapOrderDetail'
		}).then(res => {
			uni.hideLoading();

			if (res.isSuccess && res.result) {
				console.log('报废单详情数据:', res.result); // 添加日志查看数据结构
				detail.value = res.result;

				// 确保数据结构正确
				if (!detail.value.masterInfo) {
					detail.value = {
						masterInfo: {
							scrapCode: res.result.scrap_code,
							scrapName: res.result.scrap_name,
							creationTime: res.result.fm_creation_time,
							scrapUserName: res.result.scrap_user_name,
							scrapReasonName: res.result.scrap_reason_name,
							scrapStatusName: res.result.scrap_status_name
						},
						assetDetails: res.result.assetScrapDets?.map(item => ({
							assetName: item.asset_name,
							assetClassName: item.asset_class_name,
							assetCode: item.asset_code,
							specModel: item.spec_model,
							image: item.image
						})) || []
					};
				}
			} else {
				uni.showToast({
					title: '加载数据失败',
					icon: 'none'
				});
			}
		}).catch(err => {
			uni.hideLoading();
			uni.showToast({
				title: '网络异常，请稍后重试',
				icon: 'none'
			});
			console.error('加载报废单详情失败:', err);
		});
	};

	// 审核相关状态
	const isAuditMode = ref(false);
	const showRejectPopup = ref(false);
	const rejectReason = ref('');
	const pageParams = ref({
		scrapCode: '',
		mode: ''
	});

	// 页面加载时判断是否为审核模式
	onLoad((options) => {
		// 保存页面参数
		pageParams.value = {
			scrapCode: options.scrapCode || '',
			mode: options.mode || ''
		};

		// 判断是否为审核模式
		isAuditMode.value = options.mode === 'audit';
		if (options.scrapCode) {
			// 加载报废单详情
			loadScrapDetail(options.scrapCode);
		}
		if(isAuditMode.value){
			uni.setNavigationBarTitle({
				title: t('assetScrapping.audit'),
			});
		}else{
			uni.setNavigationBarTitle({
				title: t('assetScrapping.detail'),
			});
		}

	});

	// 显示驳回弹窗
	const showRejectDialog = () => {
		rejectReason.value = '';
		showRejectPopup.value = true;
	};

	// 关闭驳回弹窗
	const closeRejectDialog = () => {
		showRejectPopup.value = false;
	};

	// 确认驳回
	const confirmReject = () => {
		if (!rejectReason.value.trim()) {
			uni.showToast({
				title: '请输入驳回原因',
				icon: 'none'
			});
			return;
		}
		submitAudit('REJECTED');
		closeRejectDialog();
	};

	// 审核通过
	const approveScrap = () => {
		uni.showModal({
			title: '审核确认',
			content: `确定通过报废单 ${detail.value.masterInfo?.scrapCode} 的审核吗？`,
			cancelText: '取消',
			confirmText: '确定',
			success: (res) => {
				if (res.confirm) {
					submitAudit('APPROVED');
				}
			}
		});
	};

	// 提交审核结果
	const submitAudit = (auditResult) => {
		uni.showLoading({
			title: '提交中...'
		});

		http.post('/api/module/Invoke', {
			pageCode: "assetscrapping",
			params: {
				args: [{
						name: "interfaceCode",
						value: "assetscrapping.auditAssetScrapOrder"
					},
					{
						name: "scrapCode",
						value: detail.value.masterInfo?.scrapCode
					},
					{
						name: "auditState",
						value: auditResult
					},
					{
						name: "approvalReason",
						value: auditResult === 'REJECTED' ? rejectReason.value : ''
					}
				]
			},
			methodName: "auditAssetScrapOrder"
		}).then(res => {
			uni.hideLoading();
			if (res.isSuccess) {
				uni.showToast({
					title: auditResult === 'APPROVED' ? '审核通过成功' : '驳回成功',
					icon: 'success'
				});
				setTimeout(() => {
					goBack();
				}, 1500);
			} else {
				uni.showToast({
					title: res.error || '操作失败',
					icon: 'none'
				});
			}
		}).catch(() => {
			uni.hideLoading();
			uni.showToast({
				title: '网络异常，请稍后重试',
				icon: 'none'
			});
		});
	};

	// 移除未使用的 approvalComment
	// 移除重复的 submitApproval 方法，使用 submitAudit 替代

	// 返回上一页
	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style>
	.container {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.info-section,
	.asset-section,
	.attachment-section,
	.approval-section,
	.approval-history {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.info-list {
		margin-top: 20rpx;
	}

	.info-item {
		display: flex;
		margin-bottom: 20rpx;
	}

	.info-label {
		width: 180rpx;
		color: #666;
	}

	.info-value {
		flex: 1;
		color: #333;
	}

	.asset-count {
		font-size: 28rpx;
		color: #666;
	}

	.asset-list {
		margin-top: 20rpx;
	}

	.asset-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}

	.asset-img-container {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
	}

	.asset-img {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.asset-info {
		flex: 1;
	}

	.asset-name {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.asset-detail {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 6rpx;
	}

	.empty-tip {
		text-align: center;
		padding: 40rpx 0;
		color: #999;
	}

	.attachment-list {
		margin-top: 20rpx;
	}

	.attachment-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}

	.attachment-name {
		flex: 1;
		font-size: 28rpx;
	}

	.approval-form {
		margin-top: 20rpx;
	}

	.approval-btns {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.approval-btns .up-button {
		width: 45%;
	}

	.history-list {
		margin-top: 20rpx;
	}

	.history-item {
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}

	.history-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.history-user {
		font-weight: bold;
	}

	.history-time {
		color: #999;
		font-size: 24rpx;
	}

	.history-content {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.history-comment {
		margin-left: 20rpx;
		color: #666;
	}

	.footer-btn {
		margin-top: 40rpx;
		padding-bottom: 40rpx;
	}

	/* 审核按钮样式 */
	.footer-btn {
		display: flex;
		justify-content: space-around;
		padding: 30rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		margin-top: 40rpx;
		padding-bottom: 40rpx;
	}

	.audit-btns {
		justify-content: space-between;
		padding: 20rpx 50rpx;
	}

	/* 驳回弹窗样式 */
	.reject-popup {
		width: 600rpx;
		padding: 40rpx;
		border-radius: 20rpx;
	}

	.reject-title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.reject-content {
		margin-bottom: 30rpx;
	}

	.reject-buttons {
		display: flex;
		justify-content: space-between;
	}

	.rounded {
		width: 80rpx;
		height: 80rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
	}
</style>